<template>
  <view class="content">
    <van-nav-bar title="首页钻展" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="exhibit"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <view class="thali-cont">
        <view class="thali-title">套餐选择</view>
        <view class="thali-box">
          <view
            class="thali-list"
            :class="info.product_id === item.product_id ? 'active' : ''"
            @click="choseHandle(item)"
            v-for="item in list"
            :key="item.product_id"
          >
            <text class="thali-text">{{ item.product_name }}</text>
            <text class="price-text">￥{{ item.product_price }}</text>
            <text class="month-text" v-if="item.origin_product_price">原价￥{{ item.origin_product_price }}</text>
          </view>
        </view>
      </view>
      <view class="inviolable">
        <view class="interests exhibit-interests">
          <van-divider
            contentPosition="center"
            customStyle="color: #2B303B; border-color: rgba(34,34,34,0.07); font-size: 32rpx;"
            >套餐内权益</van-divider
          >
          <view class="interests-box">
            <view class="interests-list" v-for="(item, index) in info.service" :key="index">
              <view class="list-l">{{ item.service_name }}</view>
              <view class="list-r" v-if="item.service_price">价值¥{{ item.service_price }}</view>
            </view>
          </view>
        </view>
        <view class="interests">
          <van-divider
            contentPosition="center"
            customStyle="color: #2B303B; border-color: rgba(34,34,34,0.07); font-size: 32rpx;"
            >首页钻石级展位</van-divider
          >
          <view class="interests-box">
            <image class="img-box" src="https://images.tongzhuangkc.com/tz/shouye.png" />
            <view class="interests-text"
              >彰显实力，引爆流量（随机轮播）<br />让每一位进入平台的 <text>精准行业用户</text>都能看到您</view
            >
          </view>
        </view>
        <view class="interests">
          <van-divider
            contentPosition="center"
            customStyle="color: #2B303B; border-color: rgba(34,34,34,0.07); font-size: 32rpx;"
            >置顶服务</van-divider
          >
          <view class="interests-box">
            <image class="img-box" style="height: 708rpx" src="https://images.tongzhuangkc.com/tz/zhiding1.png" />
            <view class="interests-text"
              >货源信息全渠道推广，每次曝光30000+<br />小秘书代推，可推手机号、微信二维码</view
            >
          </view>
        </view>
        <view class="interests">
          <van-divider
            contentPosition="center"
            customStyle="color: #2B303B; border-color: rgba(34,34,34,0.07); font-size: 32rpx;"
            >代运营服务</van-divider
          >
          <view class="interests-box">
            <image class="img-box" style="height: 708rpx" src="https://images.tongzhuangkc.com/tz/yunying.png" />
            <view class="interests-text">当甩手掌柜，坐等买家上门</view>
          </view>
        </view>
        <view class="interests">
          <van-divider
            contentPosition="center"
            customStyle="color: #2B303B; border-color: rgba(34,34,34,0.07); font-size: 32rpx;"
            >购买完成后请联系专属客服</van-divider
          >
          <view class="interests-box">
            <image class="img-box" style="height: 302rpx; width: 302rpx" :src="qrcode" />
          </view>
        </view>
      </view>
    </view>
    <view class="exhibit-opt">
      <view v-if="info.product_price"
        ><text class="price">￥{{ info.product_price }}</text
        ><br /><text>已优惠￥{{ info.origin_product_price - info.product_price }}</text></view
      >
      <view class="opt-btn" @click="payHandle">立即支付</view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
import { getPriceInfo, orderAjax } from '@/http/buy'
import { useUserStore } from '@/store/modules/user'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const userStore = useUserStore()
    const state = reactive({
      safeAreaTop: 0,
      safeAreaBot: 0,
      list: [],
      info: {},
      qrcode: '',
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    onMounted(() => {
      getPrice()
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    const getPrice = async () => {
      const { wx_kefu_qrcode } = userStore.getField()
      state.qrcode = wx_kefu_qrcode
      const { data } = await getPriceInfo({
        product_type: 4,
      })
      state.list = data
      state.info = data[0]
    }
    const choseHandle = (item) => {
      state.info = item
    }
    const payHandle = async () => {
      const { product_id, product_price } = state.info
      const { data } = await orderAjax({
        product_id,
        product_price,
      })
      if (data.need_wx_pay == 1) {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            uni.navigateTo({
              url: `/subpackage-platform/order/index`,
            })
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err))
          },
        })
      } else {
        uni.showToast({
          title: '恭喜您购买成功！',
          icon: 'none',
        })
        setTimeout(() => {
          uni.switchTab({
            url: `/pages/user/index`,
          })
        }, 1000)
      }
    }
    return {
      ...toRefs(state),
      onClickLeft,
      getPrice,
      choseHandle,
      payHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.exhibit {
  height: calc(100vh - 230rpx);
  overflow-y: auto;
}
.thali-cont {
  padding: 32rpx;
  background: #f5f6fa;
  .thali-title {
    color: #2b303b;
    height: 48rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 48rpx;
    text-align: center;
  }
  .thali-box {
    display: flex;
    margin: 0 -13rpx;
    .thali-list {
      display: flex;
      flex-flow: wrap;
      margin: 32rpx 13rpx 0;
      padding: 32rpx;
      width: 330rpx;
      height: 184rpx;
      border-radius: 16rpx;
      background: #fff;
      border: 4rpx solid #fff;
      text {
        display: block;
        width: 100%;
        text-align: center;
      }
      .thali-text {
        color: #7f8798;
        font-size: 28rpx;
      }
      .price-text {
        color: #2b303b;
        font-size: 64rpx;
        margin: 16rpx 0;
        line-height: 80rpx;
      }
      .month-text {
        color: #7f8798;
        font-size: 20rpx;
      }
      &.active {
        background: #e5eeff;
        border-color: #3775f2;
        .thali-text,
        .price-text {
          color: #3775f2;
        }
      }
    }
  }
}
.exhibit-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  view {
    font-size: 20rpx;
    color: rgba(20, 15, 8, 0.7);
    .price {
      color: #e94148;
      font-size: 36rpx;
    }
  }
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188rpx;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
    border-radius: 40rpx;
  }
}
.inviolable {
  padding: 0 32rpx 32rpx;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  overflow: hidden;
  .interests {
    margin-bottom: 16rpx;
    .interests-box {
      text-align: center;
      .img-box {
        width: 100%;
        height: 622rpx;
      }
      .interests-text {
        text-align: center;
        margin-top: 48rpx;
        font-size: 28rpx;
        color: #2b303b;
        line-height: 44rpx;
        text {
          font-weight: 500;
        }
      }
    }
  }
  .exhibit-interests {
    .interests-box {
      padding: 24rpx 24rpx 0;
      background: #ebf2ff;
      .interests-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40rpx;
        width: 100%;
        padding-bottom: 24rpx;
        .list-l {
          font-size: 28rpx;
          color: #2b303b;
        }
        .list-r {
          font-size: 24rpx;
          color: #7f8798;
        }
      }
    }
  }
}
</style>
